
<template>
  <div class="containerWrap">
    <div class="headWrap">
      <div class="content_title">修改密码</div>
    </div>
    <div class="wrap">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="name" >
          <el-input v-model="ruleForm.name"  type="passworld" placeholder="填写旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="" >
          <el-input v-model="ruleForm.name" type="passworld" placeholder="填写新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="" >
          <el-input v-model="ruleForm.name" type="passworld" placeholder="确认新密码"></el-input>
        </el-form-item>
      </el-form>
      <div class="buttonWrap">
        <el-button @click="cancel"  size="small">取消</el-button>
        <el-button type="info" @click="save"  size="small">提交保存</el-button>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        tableData: [],
        ruleForm: {}
      };
    },
    methods: {
      // 开通账户
      openAccount () {
        alert('开通账户');
      },
      // 列表每页显示数量改变
      handleSizeChange (size) {
        alert('每页数量改变');
      },
      // 请求第几页
      handleIndexChange (index) {
        alert('请求第几页');
      },
      // 重置
      reset () {
        alert('重置');
      },
      // 保存
      save () {
        alert('保存');
      },
      // 取消
      cancel () {
        alert('取消');
      }
    },
    components: {},
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrap{
    width: 800px;
  }

</style>
